<template>
  <view class="sub-page">
    <u-sticky bgColor="#fff" offsetTop="0">
      <view class="tabs-box">
        <tabs
          itemStyle="padding-right: 64rpx;padding-left:0;height: 56rpx;font-size:32rpx;line-height: 48rpx;color: rgba(0,0,0,0.7);font-weight: 600;"
          lineWidth="0"
          :activeStyle="{
            color: 'rgba(0,0,0,0.9)',
            fontSize: '40rpx',
          }"
          :list="tabs"
          :current="activeIndex"
          @click="changeTab"
        ></tabs>
      </view>
    </u-sticky>
    <view class="list-box" v-if="list && list.length">
      <view class="list" v-for="item in list" :key="item.orderId">
        <view
          class="image-info-box"
          @click="
            userId
              ? ''
              : toURL(`/page_my/subscribe/detail`, { id: item.orderId })
          "
        >
          <image
            style="width: 100%; height: 320rpx; border-radius: 16rpx;display: block"
            :src="img_api + item.imgUrl"
          >
          </image>
          <view class="top-text-box u-line-1">{{ item.commonName }}</view>
          <view class="bottom-box">
            <view class="left">
              <view class="bottom-text-label">预约日期</view>
              <view class="bottom-date-box">
                <text class="date">{{ item.ticketDate | dateFilter }}</text>
                <text class="weeks">{{ item.weekday }}</text>
              </view>
            </view>
            <view class="right" v-if="item.detailPageVoList.length">
              <view class="bottom-text-label">预约时段</view>
              <block v-for="(it, idx) in item.detailPageVoList" :key="idx">
                <view class="bottom-time-box" v-if="idx < 3">
                  <text class="time-txt">{{ it.periodTimeStart }}</text>
                  <text class="time-to">至</text>
                  <text class="time-txt">{{ it.periodTimeEnd }}</text>
                  <text class="num">{{ it.ticketCount }}场位</text>
                </view>
              </block>
              <view class="more" v-if="item.detailPageVoList.length > 2"
                >更多
              </view>
            </view>
          </view>
        </view>
        <view class="order-info">
          <!--          <view class="left">-->
          <!--            <text class="yuyue-txt">预约号</text>-->
          <!--            <text class="yuyue-num">194</text>-->
          <!--          </view>-->
          <view class="right" v-if="item.orderStatus == 1">
            <view class="lf">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-ancel.png"
              ></image>
              <text class="order-status" @click="cancelOrder(item.orderId)"
                >取消订单</text
              >
            </view>
            <view
              class="order-status-time-box"
              @click="getPayOrderInfo(item.orderId)"
            >
              <text class="text1">待支付</text>
              <text class="line"></text>
              <text class="pay-price">去支付¥{{ item.orderTotalPrice }}</text>
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-pay.png"
                class="icon-pay"
              ></image>
            </view>
          </view>
          <view
            class="right"
            v-if="
              item.orderStatus == 2 ||
              item.orderStatus == 4 ||
              item.orderStatus == 5
            "
            @click="callPhone(item)"
          >
            <view class="lf">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-service.png"
              ></image>
              <text class="order-status">联系客服</text>
            </view>
            <view
              class="right-text"
              style="color: rgba(0, 0, 0, 0.9)"
              v-if="item.orderStatus == 2"
              >已支付</view
            >
            <view class="right-text" v-if="item.orderStatus == 4">已核销</view>
          </view>
          <view class="right" v-if="item.orderStatus == 3">
            <view class="lf">
              <image
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/icon-activity-delete.png"
              ></image>
              <text class="order-status" @click="delOrder(item.orderId)"
                >删除订单</text
              >
            </view>
            <view class="right-text">已取消</view>
          </view>
        </view>
      </view>
    </view>
    <no-data
      class="booking-no-data"
      v-if="list && list.length === 0"
      text="暂无数据"
    ></no-data>
  </view>
</template>

<script>
import {
  getCancleBookingOrder,
  getDeleteOrder,
  getlistOrderVenues,
} from "@/config/api";
import tabs from "@/components/tabs/tabs.vue";
import noData from "@/components/noData.vue";
import { payTransactions } from "@/utils";

export default {
  props: ["userId", "activeId"],
  components: {
    noData,
    tabs,
  },
  data() {
    return {
      tabs: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "待付款",
          id: 1,
        },
        {
          name: "已付款",
          id: 2,
        },
        {
          name: "已核销",
          id: 4,
        },
      ],
      list: null,
      current: 1,
      activeTab: 0,
      activeIndex: 0,
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
    };
  },
  filters: {
    dateFilter: function (value) {
      if (!value) return "";
      return uni.$u.timeFormat(value, "mm月dd日");
    },
  },
  onShow() {
    const { updateId, action } = this.urlParams;
    if (updateId && this.list.length) {
      const index = this.list.findIndex((item) => item.orderId == updateId);
      const item = this.list.find((item) => item.orderId == updateId);
      if (action === "删除") {
        this.list.splice(index, 1);
      }
      if (action === "取消") {
        item.orderStatus = "3";
        this.list.splice(index, 1, item);
      }
    }
  },
  onLoad() {
    this.activeIndex = Number(this.activeId) || 0;
    if (this.activeId) {
      this.activeTab = this.tabs[this.activeId].id;
    }
    this.getList();
  },
  methods: {
    getList() {
      let param = {
        orderStatus: this.activeTab,
        orderType: 3,
        pageNum: this.current,
        pageSize: 10,
      };
      if (this.userId) {
        param.userId = this.userId;
      }
      return getlistOrderVenues(param)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            res.rows.forEach((item) => {
              item.detailPageVoList = item.detailPageVoList || [];
              item.detailPageVoList.forEach((it) => {
                it.periodTimeStart = it.periodTimeStart?.substring(0, 5);
                it.periodTimeEnd = it.periodTimeEnd?.substring(0, 5);
              });
            });
            this.list =
              this.current === 1 ? res.rows : this.list.concat(res.rows);
            this.keyId++;
          } else {
            this.list = [];
          }
          uni.hideLoading();
        })
        .catch((err) => console.log("错误了", err));
    },
    changeTab(e) {
      this.activeTab = e.id;
      this.current = 1;
      uni.showLoading({
        title: "加载中",
      });
      this.getList();
    },
    // 取消订单
    cancelOrder(id) {
      const _this = this;
      if (_this.userId) return;
      uni.showModal({
        title: "提示",
        content: "确定要取消该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            uni.showLoading({
              title: "加载中",
            });
            getCancleBookingOrder({ _id: id }).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: "已取消",
                  icon: "none",
                });
                _this.getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    //     删除订单
    delOrder(id) {
      const _this = this;
      if (_this.userId) return;
      uni.showModal({
        title: "提示",
        content: "确定要删除该订单吗？",
        success: function (res) {
          if (res.confirm) {
            console.log("用户点击确定");
            getDeleteOrder({ _id: id }).then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: "已删除",
                  icon: "none",
                });
                _this.getList();
              }
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 拨打电话
    callPhone(item) {
      if (this.userId) return;
      this.toURL(item.venuesPhone, {}, { type: "phone" });
      // getServerPhone({
      //   orderId: item.orderId,
      //   orderType: "3",
      // }).then(({ code, msg }) => {
      //   if (code === 200 && msg) {
      //     uni.makePhoneCall({
      //       phoneNumber: msg,
      //     });
      //   } else {
      //     uni.showToast({
      //       title: "暂无联系电话",
      //       icon: "none",
      //     });
      //   }
      // });
    },
    // 支付前获取订单详细
    getPayOrderInfo(orderId) {
      if (this.userId) return;
      return payTransactions(orderId)
        .then(() => {
          this.toURL("/page_index/booking-detail/result", {
            state: 1,
            id: orderId,
          });
        })
        .catch(({ code }) => {
          this.toURL("/page_index/booking-detail/result", {
            state: 0,
            id: orderId,
          });
        });
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this.getList();
    } else {
      this.loadAll = true;
    }
  },
  async onPullDownRefresh() {
    console.log("refresh");
    this.current = 1;
    await this.getList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 400);
  },
};
</script>

<style lang="scss">
.sub-page {
  .tabs-box {
    padding: 30rpx 32rpx 14rpx;
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
  }

  .list-box {
    margin: 32rpx 32rpx 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 64rpx);

    .list {
      margin-bottom: 32rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .image-info-box {
      position: relative;

      border-radius: 16rpx 16rpx 16rpx 16rpx;

      &:before {
        content: "";
        width: 686rpx;
        height: 320rpx;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.6) 100%
        );
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        z-index: 1;
      }
    }

    .top-text-box {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      padding: 24rpx 24rpx 32rpx;
      background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.4) 100%
      );
      font-size: 28rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 40rpx;
      text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
      border-radius: 16rpx 16rpx 0 0;
    }

    .bottom-box {
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 2;
      display: flex;
      //align-items: center;
      justify-content: space-between;
      width: 100%;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );
      padding: 0 24rpx 16rpx;
      border-radius: 0 0 16rpx 16rpx;

      .bottom-text-label {
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 34rpx;
      }

      .right .bottom-text-label {
        text-align: right;
      }

      .bottom-date-box {
        margin-top: 4rpx;

        .date {
          font-size: 28rpx;
          font-weight: 600;
          color: #ffffff;
          line-height: 40rpx;
          margin-right: 8rpx;
        }

        .weeks {
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          padding: 0 4rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 32rpx;
        }
      }

      .bottom-time-box {
        margin-top: 4rpx;

        .time-txt {
          font-size: 28rpx;
          font-weight: 600;
          color: #ffffff;
          line-height: 40rpx;
        }

        .time-to {
          background: rgba(255, 80, 0, 0.102);
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ff5000;
          line-height: 32rpx;
          padding: 0 4rpx;
          margin: 0 8rpx;
        }

        .num {
          background: #ff5000;
          border-radius: 2rpx 2rpx 2rpx 2rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #fff201;
          line-height: 32rpx;
          padding: 0 4rpx;
          margin-left: 8rpx;
        }
      }

      .a {
        box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }

      .more {
        text-align: right;
        margin-top: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        line-height: 34rpx;
      }
    }

    .order-info {
      //display: flex;
      //align-items: center;
      //justify-content: space-between;
      padding: 20rpx 24rpx 16rpx;
      background: #ffffff;
      box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149, 157, 165, 0.2);
      border-radius: 0 0 16rpx 16rpx;

      .yuyue-txt {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
        padding-right: 8rpx;
      }

      .yuyue-num {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.9);
        line-height: 40rpx;
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .lf {
        display: flex;
        align-items: center;
        image {
          display: block;
          margin-top: 2rpx;
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
      }

      .right-text {
        font-size: 28rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.5);
        line-height: 40rpx;
      }

      .order-status {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.7);
        line-height: 40rpx;
      }

      .order-status-time-box {
        position: relative;
        display: flex;
        align-items: center;

        .text1 {
          font-size: 28rpx;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.9);
          line-height: 40rpx;
        }

        .line {
          margin-left: 24rpx;
          margin-right: 24rpx;
          width: 2rpx;
          height: 24rpx;
          background-color: rgba(255, 113, 58, 0.5);
        }

        .pay-price {
          font-size: 28rpx;
          font-weight: 500;
          font-family: D-DIN-Bold;
          color: #ff5000;
          line-height: 40rpx;
        }

        .icon-pay {
          margin-left: 8rpx;
          display: block;
          height: 32rpx;
          width: 32rpx;
        }
      }
    }
  }
}
</style>
